<template>
  <div  class="popWin1" style="boder-radius:10px">
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="属性信息" name="first">
        <ul
          class="ul-list"
          style="margin-top: 8px; margin-bottom: 2px; max-height:187px;overflow-y:auto; "
        >
          <li v-for="item in fields" :key="fields.index">
            <span class="fieldTitle">{{item.k}} :</span>&nbsp;&nbsp;&nbsp;
            <span>{{item.v}}</span>
          </li>
        </ul>
      </el-tab-pane>

      <el-tab-pane name="second">
        <span slot="label">
          <el-badge :value="images.length" class="item" type="primary">图片信息</el-badge>
        </span>
        <el-carousel arrow="always" :autoplay="false" height="200px" trigger="click">
          <el-carousel-item v-for="item in images" :key="item.index">
            <el-image style="width:291px; height:196px" :src="image_url+item"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>

      <el-tab-pane name="third">
        <span slot="label">
          <el-badge :value="videos.length" class="item" type="primary">视频信息</el-badge>
        </span>
        <el-carousel arrow="always" :autoplay="false" height="200px" trigger="click">
          <el-carousel-item v-for="item in videos" :key="videos.index">
            <video style="width: 291px; height: 196px" controls>
              <source :src="video_url+item" type="video/mp4">
            </video>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
  import {mapState} from 'vuex';

  export default {
    name: 'index',
    data: function () {
      return {
        activeName: "first",
        images: [],
        videos: [],
        fields: [],
        remote: [],
        image_url: "http://218.10.70.73:3012/images/",
        video_url: "http://218.10.70.73:3012/video/",
        feature: undefined
      };
    },
    methods: {
      handleClick(tab, event) {
      },
      setTemplate(feature, dictionary) {
        const vi = document.getElementsByTagName('video');
        for (let i = 0; i < vi.length; i++) {
          vi[i].load();
        }
        this.feature = feature;
        const properties = feature.properties;
        this.fields = [];
        this.videos = []; //'DJI_0489.mp4','DJI_0490.mp4','DJI_0491.mp4','DJI_0492.mp4','DJI_0608.mp4','DJI_0609.mp4'
        this.images = [];
        for (let key in properties) {
          if (key === 'images' || key === 'fileName') {
            const images = properties[key];
            const files = images.split(',');
            for (let i = 0; i < files.length; i++) {
              if (files[i] === "") {
                continue;
              }
              if (files[i].substring(files[i].indexOf('.')) === '.mp4') {
                this.videos.push(files[i]);
              } else {
                this.images.push(files[i]);
              }
            }
            continue;
          }

        }
        for (let key in dictionary) {
          const value = properties[key];
          this.fields.push({k: dictionary[key] ? dictionary[key] : key, v: value});
        }
      }
    },
    computed: {
      ...mapState({
        compare(state) {
          return state.xcgl.comparable;
        }
      })
    },
    beforeDestroy() {
    }

  };
</script>
<style scoped>
  /* .popWin1 {
    
    width: 310px;
    background-color: rgba(128, 128, 128, 0.65);
    height: 280px;
    border-radius: 20px;
    padding-left: 12px;
    padding-right: 10px;
    padding-top: 10px;
  } */


/* 
   .el-tabs__item{
      color: #fff;
   }
  .el-tabs__item.is-active {
    color: #398f86FF;
  }

  .el-tabs__active-bar {
    background-color: #398f86FF;
  }

  .el-tabs__item:hover{
    color: #398f86FF;
  }
  .el-badge__content--primary{
    background-color: #398f86FF;
  } */
  .el-badge__content.is-fixed {
    top: 10px;
  }

  .ul-list li {
    list-style: none;
    margin: 0;
    margin-left: 10px;
    margin-bottom: 4px;
    padding: 0;
    height: 22px;
    line-height: 22px;
    float: left;
    width: calc(100% - 10px);
    height: auto;
    color: #fff;
  }

  .ul-list li .fieldTitle {
    font-weight: bold;
    color: #000;
  }

  .ul-list {
    width: 100%;
    float: left;
    padding: 0px;
    font-size: 12px;
    font-family: "Helvetica Neue";
  }

  .el-badge item {
    color: #fff;
  }

/**去掉滚动条 */
.ul-list::-webkit-scrollbar {
  display: none;
}

/* .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
  border-top-color: rgba(0, 0, 0, 3)
} */

</style>

